<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学员信息表</title>
		<style>
			header{
				width: 100%;
				height: 300px;
				background: #E9ECEF;
			}
			header h1{
				text-align: center;
				margin: 0;
				padding-top:100px;
			}
			header p{
				text-align: center;
				color: #787B7F;
			}
			.main{
				width: 870px;
				margin: auto;
			}
			.main input{
				width: 210px;
				height: 30px;

			}
			#s{
				width: 210px;
				height: 35px;
				border-radius: 5px;
			}
			#btn{
				width: 210px;
				height: 35px;
				color: #fff;
				background: #007BFF;
				border: 0;
				border-radius: 5px;
			}
			 ul {
				  width:870px;
				  margin:auto;
				  padding:0;
			}
			ul li span:first-child,
			ul li span:nth-child(2),
			ul li span:last-child{
				display: block;
				width: 290px;
			    height:51px;
			    border-bottom: 1px solid  #DEE2E6;
		   	    float:left;
			    line-height: 51px;
				/* padding-left: 20px; */
				
			}
			ul li{
				 overflow: hidden;
			}
			ul li:first-child span{
				 border-top:1px solid #DEE2E6;
			}
		</style>
	</head>
	<body>
		<header>
			<h1>学员信息表</h1>
			<p>1803</p>
		</header>

		<div class="main">
			<h2>添加</h2>
			<input type="text" id="n" placeholder="姓名" />
			<select id="s">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
			<input type="number" id="a" placeholder="年龄" />
			<button id="btn">添加</button>

			<h2>列表</h2>
		</div>

		<ul id="list"></ul>
		
		<script>
			function loadXMLDoc() {
				var xmlhttp;
				xmlhttp = new XMLHttpRequest();
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var json = JSON.parse(xmlhttp.responseText);
						json = json.data.reverse();
						
						for (let i = 0; i < json.length; i++) {
							var li = document.createElement("li");
	
							var spanName = document.createElement("span");
							spanName.innerHTML = json[i].studentName;
			
							var spanSex = document.createElement("span");
							spanSex.innerHTML = json[i].sex;
			
							var spanAge = document.createElement("span");
							spanAge.innerHTML = json[i].age;
			
							li.appendChild(spanName);
							li.appendChild(spanSex);
							li.appendChild(spanAge);
			
							document.querySelector("#list").appendChild(li);
						}
					}
				}
				xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
				xmlhttp.send();
			}
			loadXMLDoc();
			
			document.querySelector("#btn").addEventListener("click", function() {
				
				//获取姓名
				var n = document.querySelector("#n").value;
				//获取性别
				var s = document.querySelector("#s").value;
				//获取年龄
				var a = document.querySelector("#a").value;
				
				//ajax代码
				var t;
				t = new XMLHttpRequest();
				t.onreadystatechange = function() {
					if (t.readyState == 4 && t.status == 200) {
						document.querySelector("#list").innerHTML = "";
						loadXMLDoc();
					}
				}
				t.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=" + n +"&sex=" + s + "&age=" + a, true);
				t.send();
			})

			
			
		</script>
	</body>
</html>
